<template>
   <div>
     <!-- 主键传值 父给子传 
     v-bind绑定变量 可简写为： 
     -->
   <Title :title="title"></Title>
   <!-- 1.先提供图标容器 ref当前元素模板引用 类似于id-->
   <div style="height: 200px" ref="box"></div>
   </div>
  </template>
  
  <script setup>
  import Title from'./Title.vue';
  //引入moment
  import moment from 'moment';
  //引入get请求
  import {get} from '@/utils/request.js'
  import{ref,onMounted} from 'vue';
  
  //引入折线图构造函数
  import { Line } from '@antv/g2plot';
  const title = ref('实时湿度度曲线');
  //声明模板引用
  const box = ref(null);//{value:null}
  //声明一个空数组收取后端数据
  let temData = ref([]);
  //声明折线图表实例函数
  const loadLine = ()=>{
   //new Line(图表容器id，{图标配置项})
   const line = new Line(box.value, {
     //图表数据源
  data:temData.value,
  xField: 'time',
  yField: 'humidity',
  //配置x，y颜色
  xAxis:{
  label:{
   //旋转
   rotate:-45,
   style:{
     fill:'white'
   }
  }
  },
  yAxis:{
  label:{
   //旋转
   style:{
     fill:'white'
   }
  }
  },
  label: {
   style:{
     fill:"white",
    
   }
  },
  point: {
   size: 5,
   shape: 'diamond',
   style: {
    fill: 'white',
    stroke: '#5B8FF9',
    lineWidth: 2,
   },
  },
  //给折线图设置动画
  animation: {
     appear: {
      animation: 'wave-in',
      duration: 3500,
     },
    },
    //设置曲线平滑
    smooth:true,
  tooltip: { showMarkers: false },
  state: {
   active: {
    style: {
     shadowBlur:4,
     stroke: '#000',
     fill: 'red',
    },
   },
  },
  interactions: [{ type: 'marker-active' }],
  });
  line.render();
  }
  
  //声明获取当天数据函数
  const getTemData = async()=>{
  let response = await get('/dashboard/pageQueryTodayData',{
   page:1,
   pageSize:60
  });
  console.log(response,'获取相应');
  response.data.list.forEach((item,index,arr)=>{
   //第一条数据更改值
   arr[0].humidity=12;
   item.time = moment(item.insert_time).format('HH:mm');
  });
  //数据采集可能一致 每隔十条或八条取一条
  let temp = [];
  for(var i=0;i<response.data.list.length;i++){
  if(i%7==0){
   //下标除十等于零
   //将符合条件数据添加至temp
   temp.push(response.data.list[i])
  }
  }
  temData.value = temp;
  }
  //生命周期 获得dom 节点 标签 ref=box
  onMounted(async()=>{
   //调用获取函数
  await getTemData();
  loadLine();//加载折线图
  })
  
  </script>
  
  <style lang="less">
   
  </style>